<template>
  <div class="container">
    <div class="header">
      <div class="goods-list mar-b-15">
        <div class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="changeGoodsSort(index)">
          <div class="goods-wrap flex" v-if="index < 1 || (index >= 1 && isExpend)">
            <img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" class="width-79 height-79 goodsimg" alt="" />
            <div class="flex-item mar-l-10">
              <div class="line-2 font-13">
                <span class="current-good mar-r-6" v-if="index === 0">当前</span>
                <span>{{item.goodsTitle}}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="goodsList.length > 1">
          <div class="flex flex-center pad-t-8 pad-b-11 font-11 font-color-6" @click="isExpend = !isExpend">
            <span>{{isExpend ? '收起' : '查看更多' }}</span>
            <van-icon class="mar-l-6" color="#666" :name="isExpend ? 'arrow-up' : 'arrow-down'" size="16px" />
          </div>
        </div>
      </div>
      <div v-if="trackingNo">
        <div class="flex flex-between order-info-row">
          <div>
            <span class="font-color-9">快递单号：</span>
            <span>{{trackingNo}}</span>
          </div>
          <div class="copy-btn" @click="$pt.setClipboardData({data: trackingNo})">复制</div>
        </div>
        <div class="order-info-row">
          <span class="font-color-9">快递公司：</span>
          <span>{{expressName}}</span>
        </div>
        <div class="order-info-row">
          <span class="font-color-9">物流状态：</span>
          <span class="color-r">{{stateText}}</span>
        </div>
      </div>
      <div v-else class="order-info-row">
        <span class="font-color-9">物流状态：</span>
        <span class="color-r">待发货</span>
      </div>
    </div>
    <div class="height-10" style="background:#FAFAFA;"></div>
    <div class="no-express" v-if="!trackingNo">
      <div class="v-align-c">
        <div class="radius-out"><div class="radius-inner"></div></div>
        <div class="font-15 font-w mar-l-6">该商品暂未发货</div>
      </div>
    </div>
    <div class="steps-bar pad-r-15">
      <van-steps
        :steps="steps"
        active="0"
        direction="vertical"
        active-color="#FF4E23"
      />
    </div>
  </div>
</template>

<script>
import { getProjectOrder } from '@/api/distribution'
import { queryExpress, queryExpressByApartOrderId } from '@/api/common'

export default {
  data() {
    return {
      orderId: '',
      order: {},
      stateText: '',
      expressName: '',
      trackingNo: '',
      traces: [],
      steps: [],
      isExpend: false,
      goodsList: [],
      apartOrderId: ''
    }
  },
  computed: {
    isIPhoneX() {
      return this.$utils.isIPhoneX()
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    this.orderId = this.getCurrentPage().query.orderId
    this.getProjectOrder()
    // this.queryExpress()
  },
  methods: {
    getProjectOrder() {
      this.goodsList = []
      this.order = {}
      getProjectOrder(this.orderId).then(response => {
        if (response.isError) return
        this.order = response.data
        const goodsMap = {}
        this.order.orderGoodsList.forEach(orderGoods => {
          let skuList = goodsMap[orderGoods.goodsId]
          if (!skuList) {
            skuList = {}
          }
          skuList = Object.assign(skuList, orderGoods)
          goodsMap[orderGoods.goodsId] = skuList
        })
        this.goodsList = []
        for (let key in goodsMap) {
          this.goodsList.push(goodsMap[key])
        }
        // console.log(this.goodsList)
        this.apartOrderId = this.goodsList[0].apartOrderId || ''
        this.getQEByApartOrderId()
      })
    },
    getQEByApartOrderId() {
      // 根据拆分订单id查询物流
      if (!this.apartOrderId) {
        this.stateText = ''
        this.expressName = ''
        this.trackingNo = ''
        this.traces = ''
        return
      }
      queryExpressByApartOrderId(this.apartOrderId).then(response => {
        if (response.isError) return
        if (response.code === 101) {
          this.stateText = response.data.stateText
          this.expressName = response.data.expressName
          this.trackingNo = response.data.trackingNo
          this.traces = response.data.Traces
          this.steps = this.traces.map(item => {
            return { text: item.AcceptStation, desc: item.AcceptTime }
          })
        }
      })
    },
    changeGoodsSort(index) {
      // 点击选择当前商品
      let goods = this.goodsList[index]
      this.apartOrderId = this.goodsList[index].apartOrderId || ''
      this.goodsList.splice(index, 1)
      this.goodsList.unshift(goods)
      this.isExpend = false
      this.getQEByApartOrderId()
    },
    queryExpress() {
      if (!this.orderId) {
        return
      }
      queryExpress(this.orderId, 2).then((response) => {
        if (response.isError) return
        if (response.code === 101) {
          this.stateText = response.data.stateText
          this.expressName = response.data.expressName
          this.trackingNo = response.data.trackingNo
          this.traces = response.data.Traces
          this.steps = this.traces.map(item => {
            return { text: item.AcceptStation, desc: item.AcceptTime }
          })
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  min-height: 100vh;
  background: white;
}
.header{
  background: white;
  padding: 10px 15px;
  font-size: 12px;
}
.copy-btn{
  font-size: 13px;
  border-radius: 3px;
  border: 1px solid #CACACA;
  width: 41px;
  height: 17px;
  line-height: 17px;
  color: #333333;
  text-align: center;
}
.color-r{
  color: #FF4E23;
}
.order-info-row{
  line-height: 1;
  margin-bottom: 13px;
  &:last-child{
    margin-bottom: 0;
  }
}
.goods-list{
  .goods-item{
    &:first-child{
      .goods-wrap{
        margin-top: 0;
      }
    }
    .goods-wrap{
      margin-top: 15px;
      .current-good{
        display: inline-block;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        background: #FFE200;
        border-radius: 0 7.5px 7.5px 7.5px;
        width: 33px;
        text-align: center;
      }
      .goodsimg{
        border-radius: 5px;
      }
      .line-2{
        max-height: 34px;
        height: unset;
      }
    }
  }
}
.steps-bar{
  background: white;
  /deep/ .van-step--inactive{
    .van-step__title{
      color: #999999;
      view{
        font-size: 14px;
      }
      view:last-child{
        font-size: 12px;
      }
    }
  }
  /deep/ .van-step--process{
    .van-step__title{
      view{
        font-size: 15px;
        color: #333333;
        font-weight: bold;
      }
      view:last-child{
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
.no-express{
  padding: 18px 15px;
  background: white;
  .radius-out{
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #FFF7C1;
    display: flex;
    align-items: center;
    justify-content: center;
    .radius-inner{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #FFE100;
    }
  }
}
</style>
